import { useState } from "react"
import './index.css'
import React from 'react';
import { AppstoreOutlined, FileAddOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import { Outlet, NavLink, useNavigate } from "react-router-dom";

const { Header, Content, Sider } = Layout;

let items = [
    { label: '首页', key: 'manage', icon: <AppstoreOutlined /> },
    {
        label: '数据管理', key: 'shoplist-item', icon: <FileAddOutlined />,
        children: [
            { label: '用户列表', key: 'userlist' },
            { label: '商家列表', key: 'shoplist' }
        ]
    }
]
export default function App() {
    let Navigate = useNavigate()

    function changeTab(val) {
        Navigate('/' + val.key)
    }

    return <Layout>
        <Layout>
            <Sider width={200} className="site-layout-background">
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{
                        height: '100%',
                        borderRight: 0,
                    }}
                    onClick={changeTab}
                    items={items}
                />
            </Sider>
            <Layout
                style={{
                    padding: '0 24px 24px',
                }}
            >
                <Breadcrumb
                    style={{
                        margin: '16px 0',
                    }}
                >
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <Outlet></Outlet>
                </Content>
            </Layout>
        </Layout>
    </Layout>
}



